<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>旅行的意义</title>
	<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<script src="js/jquery.min.js"></script>
	<script src="js/vue.js"></script>
</head>
<body class="home blog custom-background">
	<div id="wrap">
		<div id="header" class="clearfix">
			<div id="logo" class="sprite">
				<div class="sprite circle">
					<a href="javascript:;" title="旅行的意义">
						<img src="img/zl.jpg" alt="logo">
					</a>
				</div>
			</div>
			<div class="mod-right">
				<h1><a href="javascript:;" title="旅行的意义">旅行的意义</a></h1>
				<div class="description">
					记忆的碎片				</div>
				<div class="tools">
					<div class="menu-container">
						<ul id="header_menu" class="clearfix">
							<li id="menu-item-1879" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1879">
								<a href="index.html">首页</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>	
		<div id="main">
			<div class="post post-text  clearfix post-left">
				<div class="post-date">
					<span class="icon day">14</span>
					<span class="week">
						<a href="">Monday</a>
					</span>
					<span class="date">October 14th  2013</span>
				</div>
				<div class="post-content">
					<div class="sprite post-main-bg">
						<div class="sprite post-main">
							<div class="mod-txt mod-text">
								<h2>
									<a href="" title="上海邻之水乡踏青采草莓" id="title1"></a>
								</h2>
								<p id="content1">
								</p>				
							</div>
						</div>
					</div>
					<div class="sprite post-meta">
						<div class="author-avatar">
							<img alt='' src='img/shanghai.jpg' class='avatar avatar-64 photo' height='64' width='64' />
						</div>
						<h3>晴</h3>
						<div class="tags">
							<table>
								<tbody>
									<tr>
										<td>
											<ul class="post-categories">
												<li><a href="" title="日记" rel="category">日记</a></li>
											</ul>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="like clearfix">
							<a class="hot-num" href="">23℃</a>
						</div>
					</div>
				</div>
			</div>					
			<div class="post post-text  clearfix post-right">
				<div class="post-date">
					<span class="icon day">20</span>
					<span class="week">
						<a href="">Thursday</a>
					</span>
					<span class="date">February 20th  2014</span>
				</div>
				<div class="post-content">
					<div class="sprite post-main-bg">
						<div class="sprite post-main">
							<div class="mod-txt mod-text">
								<h2>
									<a href="" title="ss" id="title2"></a>
								</h2>
								<p id="content2">
								</p>				
							</div>
						</div>
					</div>
					<div class="sprite post-meta">
						<div class="author-avatar">
							<img alt='' src='img/zl.jpg' class='avatar avatar-64 photo' height='64' width='64' />			
						</div>
						<h3>晴</h3>
						<div class="tags">
							<table>
								<tbody>
									<tr>
										<td>
											<ul class="post-categories">
												<li><a href="" title="声音" rel="category">声音</a></li>
											</ul>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="like clearfix">
							<a class="hot-num" href="">30℃</a>
						</div>
					</div>
				</div>
			</div>					
			<div class="post post-text  clearfix post-left">
				<div class="post-date">
					<span class="icon day">24</span>
					<span class="week">
						<a href="">Sunday</a>
					</span>
					<span class="date">November 24th  2013</span>
				</div>
				<!-- vue -->
				<div class="post-content">
					<div class="sprite post-main-bg">
						<div class="sprite post-main" id="app">
							<div class="mod-txt mod-text">
								<h2>
									<a href="">{{title}}</a>
								</h2>
								<p>
									{{content}}
								</p>				
							</div>
						</div>
					</div>
					<div class="sprite post-meta">
						<div class="author-avatar">
							<img alt='' src='img/qc.jpg' class='avatar avatar-64 photo' height='64' width='64' />			
						</div>
						<h3>霾</h3>
						<div class="tags">
							<table>
								<tbody>
									<tr>
										<td>
											<ul class="post-categories">
												<li><a href="" title="影像" rel="category">影像</a></li>
											</ul>
										</td>
									</tr>
								</tbody>
							</table>
						</div>
						<div class="like clearfix">
							<a class="hot-num" href="">40℃</a>
						</div>
					</div>
				</div>
			</div> 
		</div>
		<div id="footer">
			<span id="load-more1" class="icon load-more"></span>
			<div class="copyright">&copy; 
				<a href="" title="旅行的意义">旅行的意义</a> 网站统计代码 
				<span class="icon" title="Powered by">&#10084;</span> 
				<a href="http://www.wordpress.org/" title="wordpress" target="_blank">Wordpress</a>
				<span class="icon" title="Themed by">&#10047</span> Theme Travel v3.5 by 
				<a href="http://huilang.me/" title="人生就像一副复杂拼图,每个人总有属于自己的记忆碎片!" target="_blank">记忆碎片</a>
			</div>
		</div>
	</div>
</body>
<script>
	// 原生js插入 #title1内容
	document.getElementById('title1').innerHTML = '上海邻之水乡踏青采草莓';
	// 原生js插入 #content1内容
	document.getElementById("content1").innerHTML = `行走，停顿，驻足，思考。
									对于古镇，总有着一份特殊的情节。
									门前有河，半亩田地种瓜点豆，春夏秋冬别有一番风景。`;
	// jquery插入#title2内容
	$("#title2").html('土家族姑娘的湘?黔环游记');
	// jquery插入#content2内容
	$("#content2").html(`人总要给忙忙碌碌的生活找点不一样的乐趣，
									或是约一约许久不见的老朋友吃一顿火锅，
									或是打一场酣畅淋漓的篮球比赛，
									或是安静的看完一本喜欢的书，
									亦或是去那个一直想去却还不曾到达的远方。`);
	// vue插入内容
	var vm = new Vue({
			el:"#app",
			data:{
		title: '在潮汕吃吃喝喝的快落日子',
		content: `如果你没有来过 普宁 ，大概不知道这里美食那！么！多！ 
									普宁 肠粉、粿汁、豆干、洪阳蚝烙、猪肠胀糯米、莲藕汤、厚弥粥、牛肉火锅.......
									虽不是什么稀奇珍贵的东西，却是很多人从小到大最爱的味道。
									对于吃货们来说，就更加令人向往。`
			}
	})
</script>
</html>